<template>
<div class="matchground">
    <div class="row">
        <div class="col-4">
            <div class="user-photo">
                <img :src="$store.state.user.photo" alt="">
            </div>
            <div class="user-username">
                <span>{{$store.state.user.username}}</span>
            </div>
        </div>
        <div class="col-4">
            <select class="form-select"
                aria-label="Default select example"
                v-model="selectId"
            >
                <option value="0" selected>难度选择</option>
                <option value="1">青铜局</option>
                <option value="2">白银局</option>
                <option value="3">黄金局</option>
                <option value="4">王者局</option>
            </select>
        </div>
        <div class="col-4">
            <div class="user-photo">
            <img :src="$store.state.pk.opponent_photo" alt="">
            </div>
            <div class="user-username">
                <span>{{$store.state.pk.opponent_username}}</span>
            </div>
        </div>
    </div>
    <div class="button-container">
        <button type="button" class="btn btn-warning" @click="click_btn">{{btn_info}}</button>
    </div>
    <!-- 对于一名玩家是否可以又和其他人玩，又和AI玩，应该是允许的，所以应该是两个画布 -->
    <!-- 也一个匹配页面也行，匹配页面可以选择难易程度 -->
</div>
</template>

<script>
import {useStore} from "vuex"
import {ref,watch,computed} from "vue"
export default {
    setup(){
        const store = useStore();
        let btn_info = ref("AI 对战");
        let selectId = ref("0");
        
        //定义映射关系
        const difficultyConfig = {
            '1': { username: '青铜选手', photo: 'bronze.png' },
            '2': { username: '白银选手', photo: 'silver.png' },
            '3': { username: '黄金选手', photo: 'gold.png' },
            '4': { username: '王者选手', photo: 'king.png' }
        };
        let di_photo = computed(()=>{
            return require(`@/assets/images/${difficultyConfig[selectId.value].photo}`)
        });
        // 使用watch监听变化
        watch(
            selectId,
            (newVal, oldVal) => {
                console.log(`难度从 ${oldVal} 变为 ${newVal}`);
                
                if(newVal === "0"){
                    console.log(newVal,typeof(newVal))
                    store.commit("updateOpponent",{
                        username:"我的对手",
                        photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
                    });
                }else{
                    console.log(di_photo.value); //需要加上.value 才是路径
                    store.commit("updateOpponent",{
                        username:difficultyConfig[newVal].username,
                        photo:di_photo.value
                    });
                }
            }
        );
        const click_btn = () =>{
            if(selectId.value != '0'){
                if(btn_info.value === "AI 对战"){
                    btn_info.value = "取消";
                    store.state.pk.socket.send(JSON.stringify({
                        event:"start-matching",
                        bot_id:selectId.value
                    }));
                }else{
                    btn_info.value = "AI 对战";
                    store.state.pk.socket.send(JSON.stringify({
                        event:"stop-matching",
                    }));
                    store.commit("updateOpponent",{
                        username:"我的对手",
                        photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
                    });
                }
            }else{
                alert("请选择难度开始对战");
            }
            
        }
        return {
            selectId,
            btn_info,
            click_btn
        }
    }
}
</script>

<style scoped>
div.matchground{
    width: 65vw;
    height: 70vh;
    background-color: rgb(50,50,50,0.5);
    margin: 5% auto;
}
div.user-photo{
    text-align: center;
    padding: 15px;
    margin-top: 50%;
}
div.user-photo>img{
    width: 46%;
    border-radius: 50%;
}
div.user-username{
    color: aliceblue;
    font: 1.5em sans-serif;
    text-align: center;
    padding-top: 10px;
}
.form-select{
    margin-top: 75%;
}
/* 按钮容器：核心居中逻辑，随浏览器缩放始终居中 */
.button-container {
    width: 100%; /* 占满父容器宽度，作为居中的基础 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中（若容器有高度） */
    /* 可选：固定按钮区域与底部的距离，增强布局稳定性 */
    margin-top: 66px;
}
</style>